<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="topNav">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ name: 'base' }">仓库系统</el-breadcrumb-item>
        <el-breadcrumb-item>序列号追踪表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="together-content">
      <!-- 搜索区域 -->
      <div class="search-form">
        <el-form :inline="true" :model="searchForm" size="small" style="margin-bottom: 10px;">
          <!-- 单据日期 -->
          <el-form-item label="单据日期">
            <el-date-picker
              v-model="searchForm.startDate"
              type="date"
              placeholder="开始日期"
              value-format="YYYY-MM-DD"
              clearable
              style="width: 100px"
            />
            <span style="margin: 0 10px;">至</span>
            <el-date-picker
              v-model="searchForm.endDate"
              type="date"
              placeholder="结束日期"
              value-format="YYYY-MM-DD"
              clearable
              style="width: 100px"
            />
          </el-form-item>

          <!-- 仓库 -->
          <el-form-item label="仓库">
            <el-input v-model="input" readonly placeholder="选择仓库" @click="warehouseVisible = true" style="width: 180px"/>
          </el-form-item>

          <!-- 商品 -->
          <el-form-item label="商品">
            <el-select
              v-model="searchForm.productName"
              placeholder="请选择商品"
              clearable
              filterable
              style="width: 120px"
            >
              <el-option
                v-for="name in uniqueProductNames"
                :key="name"
                :label="name"
                :value="name"
              />
            </el-select>
          </el-form-item><br/><br/>

          <!-- 业务类型 -->
          <!-- <el-form-item label="业务类型">
            <el-select
              v-model="searchForm.businessType"
              placeholder="请选择业务类型"
              clearable
              style="width: 130px"
            >
              <el-option label="采购入库" value="采购入库" />
              <el-option label="销售出库" value="销售出库" />
              <el-option label="退货入库" value="退货入库" />
              <el-option label="调拨出库" value="调拨出库" />
              <el-option label="维修返还" value="维修返还" />
            </el-select>
          </el-form-item> -->

          <!-- 序列号 -->
          <el-form-item label="序列号">
            <el-select
              v-model="searchForm.serialNumber"
              placeholder="请选择序列号"
              clearable
              filterable
              style="width: 120px"
            >
              <el-option
                v-for="sn in uniqueSerialNumbers"
                :key="sn"
                :label="sn"
                :value="sn"
              />
            </el-select>
          </el-form-item>
          <!-- 查询按钮 -->
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 分割线 -->
        <el-divider style="margin: 10px 0" />
      </div>
      <!-- 仓库搜索列表弹出对话框 -->
      <el-dialog
        v-model="warehouseVisible"
        title="仓库搜索列表"
        width="40%"
        style="height: auto;"
        draggable
        :show-close="true">
        <!-- 调用仓库的搜索组件 -->
        <WareHouse ref="warehouseRef" :info="{selection: true, no: false, name: true, code: true, status: false, op: false, outButton: true}"/>
        <br/><br/>
      </el-dialog>
      <!-- 导出和打印按钮 -->
      <div class="table-header-buttons">
        <el-button type="primary" size="small" @click="handleExport">导出</el-button>
        <el-button size="small" @click="handlePrint">打印</el-button>
      </div><br/>

      <!-- 表格容器 -->
      <el-table
        :data="displayData"
        border
        stripe
        :header-cell-style="{ background: '#f5f7fa', fontWeight: 'bold' }"
        style="width: 100%"
        :max-height="600"
        v-loading="loading"
        show-summary
        sum-text="总计"
      >
        <el-table-column prop="serialNumber" label="序列号" width="180" align="center" fixed />
        <el-table-column prop="productCode" label="商品编号" width="100" align="center" />
        <el-table-column prop="productName" label="商品名称" width="150" align="center" />
        <el-table-column prop="specification" label="规格型号" width="120" align="center" />
        <el-table-column prop="brand" label="品牌" width="100" align="center" />
        <el-table-column prop="unit" label="单位" width="80" align="center" />
        <el-table-column prop="warehouse" label="仓库" width="100" align="center" />
        <el-table-column prop="quantity" label="数量" width="80" align="center" />
        <el-table-column prop="orderCode" label="单据编号" width="150" align="center" />
        <el-table-column prop="orderDate" label="单据日期" width="120" align="center" />
        <el-table-column prop="businessType" label="业务类型" width="120" align="center" />
        <el-table-column prop="clientSupplier" label="客户/供应商" width="150" align="center" />
        <el-table-column prop="salesPerson" label="操作人" width="100" align="center" />
        <el-table-column prop="status" label="当前状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag size="small" :type="row.status === '在库' ? 'success' : 'warning'">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="120" align="center" />
      </el-table><br/>

      <!-- 分页 -->
      <div class="page-div">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="10"
          layout="total, ->, prev, pager, next, jumper"
          background
        />
      </div>

      
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import WareHouse from '@/views/basic/WareHouse.vue'
//仓库搜索选中结果
let warehouseVisible = ref(false)
let input = ref('')
let warehouseRef = ref();
watch(warehouseVisible, (newVisible) => {
    if(!newVisible) {
        if(warehouseRef.value) { //这里需要加上if判断，子组件中没有选择数据时为undefined，可能用于点击仓库，但是没选择，所以导致undefined报错
        input.value = warehouseRef.value.selectedArray.map(item => item.name).join(',')
        //获取到仓库编码，存数据库用，仓库name仅用作展示
        //用完之后清空，避免污染其他地方数据
        warehouseRef.value.clearSelected();
        }
    }
})

// 模拟数据：序列号追踪表
const rawData = ref([
  {
    serialNumber: 'SN202510230001',
    productCode: '572',
    productName: '高端智能电视',
    specification: '65寸 4K OLED',
    brand: '星辉',
    unit: '台',
    warehouse: '电子库A区',
    quantity: 1,
    orderCode: 'PO20251023001',
    orderDate: '2025-10-23',
    businessType: '采购入库',
    clientSupplier: '星辰科技有限公司',
    salesPerson: '张伟',
    status: '在库',
    remark: '全新未拆封'
  },
  {
    serialNumber: 'SN202510230001',
    productCode: '572',
    productName: '高端智能电视',
    specification: '65寸 4K OLED',
    brand: '星辉',
    unit: '台',
    warehouse: '已出库',
    quantity: 1,
    orderCode: 'SO20251024005',
    orderDate: '2025-10-24',
    businessType: '销售出库',
    clientSupplier: '王强',
    salesPerson: '李娜',
    status: '已出库',
    remark: '客户自提'
  },
  {
    serialNumber: 'SN202510230002',
    productCode: '886',
    productName: '无线降噪耳机',
    specification: '黑色 降噪Pro',
    brand: '声动',
    unit: '副',
    warehouse: '音频库',
    quantity: 1,
    orderCode: 'PO20251022008',
    orderDate: '2025-10-22',
    businessType: '采购入库',
    clientSupplier: '声动电子',
    salesPerson: '赵敏',
    status: '在库',
    remark: ''
  },
  {
    serialNumber: 'SN202510230003',
    productCode: '572',
    productName: '高端智能电视',
    specification: '65寸 4K OLED',
    brand: '星辉',
    unit: '台',
    warehouse: '维修库',
    quantity: 1,
    orderCode: 'RT20251020012',
    orderDate: '2025-10-20',
    businessType: '退货入库',
    clientSupplier: '客户李明',
    salesPerson: '张伟',
    status: '维修中',
    remark: '屏幕故障'
  }
])

// 搜索表单
const searchForm = reactive({
  serialNumber: '',
  startDate: '',
  endDate: '',
  warehouse: '',
  productName: '',
  businessType: ''
})

// 计算唯一选项
const uniqueSerialNumbers = computed(() => [...new Set(rawData.value.map(i => i.serialNumber))])
// const uniqueWarehouses = computed(() => [...new Set(rawData.value.map(i => i.warehouse))])
const uniqueProductNames = computed(() => [...new Set(rawData.value.map(i => i.productName))])

// 过滤后的数据显示
const displayData = computed(() => {
  return rawData.value.filter(item => {
    const matchesSerial = !searchForm.serialNumber || item.serialNumber === searchForm.serialNumber
    const matchesDate = (!searchForm.startDate || item.orderDate >= searchForm.startDate) &&
                        (!searchForm.endDate || item.orderDate <= searchForm.endDate)
    const matchesWarehouse = !searchForm.warehouse || item.warehouse === searchForm.warehouse
    const matchesName = !searchForm.productName || item.productName === searchForm.productName
    const matchesBusinessType = !searchForm.businessType || item.businessType === searchForm.businessType

    return matchesSerial && matchesDate && matchesWarehouse && matchesName && matchesBusinessType
  })
})

// 加载状态
const loading = ref(false)

// 查询与重置
const handleQuery = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
}

const resetSearch = () => {
  searchForm.serialNumber = ''
  searchForm.startDate = ''
  searchForm.endDate = ''
  searchForm.warehouse = ''
  searchForm.productName = ''
  searchForm.businessType = ''
}

// 导出功能
const handleExport = () => {
  alert('导出功能已触发，可在此实现 Excel 导出逻辑')
}

// 打印功能
const handlePrint = () => {
  window.print()
}
</script>

<style scoped>
.container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.topNav {
  margin-bottom: 20px;
}



/* 控制 el-form-item 宽度 */
::v-deep(.el-form-item) {
  flex: 1 1 200px;
  min-width: 180px;
  margin-bottom: 0;
}

/* 按钮右对齐 */
::v-deep(.el-form-item:last-child) {
  flex: none;
  margin-left: auto;
}

/* 日期中间“至”字 */
.search-form .el-form-item .el-date-editor--date + span {
  margin: 0 5px;
}

/* 下拉框自适应宽度 */
::v-deep(.el-select) {
  width: 100%;
}

.table-header-buttons {
  margin-top: 10px;
  text-align: right;
}

::v-deep(.el-table tbody tr:hover > td) {
  background-color: #edd4587d !important;
  border-bottom-color: #c78e39;
}

::v-deep(.el-table .el-table__body td) {
  padding: 8px 0;
  height: 55px;
}

::v-deep(.el-table .el-table__header th) {
  padding: 10px 0;
  height: 44px;
  background-color: #f5f7fa;
}

::v-deep(.el-table__footer) {
  background-color: #d6d847bc !important;
  font-weight: bold;
  font-size: 14px;
}

</style>